<template>
  <div class="app-container">
    <div class="tip">
      <el-select v-model="awc" filterable placeholder="静态处方图">
        <el-option
          v-for="(item, index) in awcList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button
        v-print="print"
        class="ml12"
        icon="el-icon-download"
        type="primary"
      >
        打印/导出推荐位置信息
      </el-button>
      <el-button
        class="ml12"
        icon="el-icon-plus"
        type="danger"
        @click="handleImport"
      >
        导入土壤数据
      </el-button>
    </div>
    <div class="h12"></div>
    <el-row>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>布设位置推荐信息</span>
          </div>
          <el-table
            :data="tableData"
            :row-class-name="getRowClass"
            style="width: 100%"
          >
            <el-table-column align="center" label="经度" prop="lat" />
            <el-table-column align="center" label="纬度" prop="lng" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div id="printArea" ref="pdfContent" class="content font24 font-bold">
          <div class="content ml12">
            <l-map
              :center="center"
              :options="options"
              :zoom="zoom"
              @update:center="centerUpdate"
              @update:zoom="zoomUpdate"
            >
              <l-tile-layer
                v-for="(item, index) in urls"
                :key="`layer${index}`"
                :url="item"
              />
              <l-marker
                v-for="(item, index) in tableData"
                :key="`marker${index}`"
                :icon="getIcon()"
                :lat-lng="[item.lng, item.lat]"
                :title="getName(item)"
                @click="showDevice(item)"
              >
                <l-tooltip :options="markerOptions">
                  <div>
                    {{ `${item.lng},${item.lat}` }}
                  </div>
                </l-tooltip>
              </l-marker>

              <l-circle
                :color="circle.color"
                :fill-color="circle.color"
                :lat-lng="circle.center"
                :opacity="0"
                :radius="circle.radius"
              />
            </l-map>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="载入数据文件" :visible.sync="dialogVisible" width="800px">
      <el-empty v-if="exportData.length === 0" description="暂无任何计算结果">
        <file-upload :action="uploadUrl" :name="name" @onSuccess="onSuccess" />
      </el-empty>
    </el-dialog>
  </div>
</template>

<script>
  import { map, cellsSprinkler } from '@/utils/constant'
  import FileUpload from '@/components/FileUpload'
  import { deepClone, arraySort } from '@/utils'
  export default {
    components: {
      FileUpload,
    },
    data() {
      return {
        activeName: 'first',
        daterange: '',
        zoom: map.zoom,
        center: map.center,
        options: map.options,
        urls: map.mapTypes[map.initType],
        cells: cellsSprinkler,
        dialogVisible: false,
        uploadUrl: 'https://api.zesi.com.cn/idata/util/upload',
        name: 'awc',
        awc: {},
        markerOptions: {
          permanent: true,
          interactive: false,
          direction: 'bottom',
          offset: [0, 8],
          className: 'anim-tooltip',
        },
        awcList: [
          { name: 'awc-2024-05-01', id: 1 },
          { name: 'awc-2024-05-02', id: 2 },
        ],
        exportData: [],
        tableData: [
          {
            level: '高',
            lng: '37.46757434',
            lat: '114.9131603',
          },
          {
            level: '高',
            lng: '37.46812059',
            lat: '114.9130659',
          },
          {
            level: '高',
            lng: '37.466548844',
            lat: '114.9132113',
          },
          {
            level: '中',
            lng: '37.46825872',
            lat: '114.9140309',
          },
          {
            level: '中',
            lng: '37.46776924',
            lat: '114.9141245',
          },
          {
            level: '中',
            lng: '37.46748247',
            lat: '114.9141149',
          },
          {
            level: '低',
            lng: '37.46722002',
            lat: '114.9146736',
          },
          {
            level: '低',
            lng: '37.46670643',
            lat: '114.9148177',
          },
          {
            level: '低',
            lng: '37.46685888',
            lat: '114.9141839',
          },
        ],
        circle: {
          serialno: '0110.0007.2027000724',
          name: '大曹庄农场喷灌机-0724',
          radius: 150,
          center: [37.467294, 114.913504],
          color: `rgba(248, 9, 9, 1)`,
          lat: 37.467294,
          lng: 114.913504,
          latlngs: [
            [37.467294, 114.913504],
            [37.46771532274502, 114.91188941023749],
          ],
        },
        print: {
          id: 'printArea', // 必要，打元素的id
          popTitle: '打印', // 打印配置页上方标题
          extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
          preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
          previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
          previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
          zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
          previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
          previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
          beforeOpenCallback() {}, // 开启打印前的回调事件
          openCallback() {}, // 调用打印之后的回调事件
          closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
          url: '',
          standard: '',
          extraCss: '',
        },
      }
    },
    computed: {
      cellsFormat() {
        const cells = deepClone(this.cells)
        return arraySort(cells, 'disend')
      },
    },
    methods: {
      onSuccess(response) {
        const { errorCode, msg, data } = response
        if (errorCode !== 0) {
          this.$message({
            message: (msg && `上传失败，失败原因：${msg}`) || '上传失败',
            type: 'error',
          })
          this.$emit('onError', data)
        } else {
          this.$baseMessage('操作成功', 'success')
          this.exportData = data
        }
      },
      handleImport() {
        this.dialogVisible = true
      },
      getRowClass({ row }) {
        const dict = {
          高: 'bg-success-plain',
          中: 'bg-warning-plain',
          低: 'bg-danger-plain',
        }
        return dict[row.level] || ''
      },
      zoomUpdate(zoom) {
        this.zoom = zoom
      },
      centerUpdate(center) {
        this.center = center
      },

      getIcon() {
        // eslint-disable-next-line no-undef
        return L.icon({
          iconSize: [28, 28],
          iconUrl: 'https://img.intelirri.com/device/sqz/d_run.png',
        })
      },
      getName(item) {
        return `${item.lat},${item.lng}`
      },
      showDevice(row) {
        console.log(row)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    height: 760px;
    text-align: center;
  }
</style>
